<template>
  <div>
    <el-upload action="#" :file-list="fileList" ref="uploadRef" class="upload" :limit="excelLimit" :multiple="false"
      :show-file-list="true" :disabled="loading" :http-request="handleHttpUpload" :before-remove="handleRemove"
      :accept="parameter.fileType.join(',')">
      <!-- :on-change="changeFile" -->
      <!-- :before-upload="beforeExcelUpload" -->
      <!-- :http-request="uploadExcel" -->
      <slot name="empty">
        <el-button text :loading="loading"><svg-icon class="mr-2" icon-class="add1" /> 文件上传</el-button>
      </slot>
      <template #tip>
        <slot name="tip">
          <!-- <div class="el-upload__tip">
            请上传 .xls , .xlsx 标准格式文件，文件最大为
            {{ parameter.fileSize }}M
          </div> -->
        </slot>
      </template>
    </el-upload>
  </div>
</template>
<script setup name="FileUpload">
import { reactive, toRefs } from "vue";
import { uploadFile } from "@/api/index.js";
import { ElMessage } from "element-plus";
const data = reactive({
  uploadRef: null,
  visible: false,
  loading: false,
  excelLimit: 1, // 最大文件上传数
  binary: null,
  fileList: [],
  parameter: {
    title: "",
    fileSize: 10,
    fileType: [],
  },
});
const { visible, loading, excelLimit, parameter, uploadRef,fileList } =
  toRefs(data);

  const props = defineProps({
  types: {
    type: String,
    default: () => "",
  },
  files: {
    type: Array,
    default: () => [],
  },
});

watch(() => props.files, val => {
  if (val) {
    let temp = 1;
    // 首先将值转为数组
    const list = Array.isArray(val) ? val : props.files.split(',');
    // 然后将数组转为对象数组
    fileList.value = list.map(item => {
      if (typeof item === "string") {
        item = { name: item, url: item };
      }
      item.uid = item.uid || new Date().getTime() + temp++;
      return item;
    });
  } else {
    fileList.value = [];
    return [];
  }
}, { deep: true, immediate: true });
// 获取 el-form 组件上下文
// 接收父组件参数
const acceptParams = (params) => {
  parameter.value = { ...parameter.value, ...params };
  visible.value = true;
};

const handleRemove = (file, fileList) => {
  emits("update:files", fileList.value);
};
/**
 * @description 图片上传
 * @param options upload 所有配置项
 * */
const emits = defineEmits(["update:files"]);
const handleHttpUpload = async (options) => {
  loading.value = true;
  let formData = new FormData();
  const { file } = options;
  formData.append("file", file);
  uploadFile(formData)
    .then((res) => {
      ElMessage.success(res.message);
      fileList.value.push(res.data["data-show-file"]);
      emits("update:files", fileList.value);
    })
    .finally(() => {
      loading.value = false;
    });
  // try {
  //   const { data } = await uploadFile(formData)
  //   loading.value = false
  //   fileList.value.push(data['data-show-file'])
  //   emits('update:files', fileList.value)
  // } catch (error) {
  //   options.onError(error)
  // }
};
defineExpose({
  acceptParams,
});
</script>
<style lang="scss" scoped>
:deep(.el-upload-list) {
  display: flex;
  justify-content: flex-start;

  .el-upload-list__item {
    margin-right: 40px;
  }
}
</style>
